<template>
	<view class="container">
		<view class="hea">
			<!-- 时间筛选 -->
			<view class="filter">
				<view>
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
						activeColor="#2f81fa" style="width: 300rpx;"></uni-segmented-control>
				</view>
				<view class="tabs">
					<uni-icons type="bars" size="20"></uni-icons>
					<text>自定义</text>
				</view>
			</view>

			<!-- 核心数据 -->
			<view class="data-cards">
				<view class="data-card">
					<view class="data-im">
						<image src="/static/shour.png"></image>
					</view>
					<text class="data-value">￥2066.56</text>
					<text class="data-label">收入</text>
				</view>
				<view class="data-card">
					<view class="data-im">
						<image src="/static/dingd.png"></image>
					</view>
					<text class="data-value">53</text>
					<text class="data-label">订单量</text>
				</view>
			</view>
		</view>
		<!-- 收入分布 -->
		<view class="chart-section">
			<text class="section-title">收入分布</text>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<!-- 订单分布 -->
		<view class="chart-section">
			<text class="section-title">订单分布</text>
			<view class="charts-box">
			    <qiun-data-charts 
			      type="column"
			      :opts="opts1"
			      :chartData="chartData1"
			    />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
 

	const current = ref(0)
	const items = ref(['今日', '昨日'])

	function onClickItem(e) {
		console.log(e)
		current.value = e.currentIndex
	}
	const value = ref(1)
	const ite = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	])



	function change(e) {
		console.log("e:", e);
	}

	// const chartData = ref([{
	// 		"name": "洗车",
	// 		"value": 500
	// 	},
	// 	{
	// 		"name": "保养",
	// 		"value": 1566.56
	// 	}
	// ])
	const chartData = ref({
		series: [
		  {
		    data: [
		      {"name":"洗车","value":500},
		      {"name":"保养","value":1566.56}
		    ]
		  }
		]
	});
	const opts = ref({
	  rotate: false,
	  rotateLock: false,
	  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	  padding: [5,5,5,5],
	  dataLabel: true,
	  enableScroll: false,
	  legend: {
	    show: true,
	    position: "right",
	    lineHeight: 25
	  },
	  title: {
	    name: "收益率",
	    fontSize: 15,
	    color: "#666666"
	  },
	  subtitle: {
	    name: "70%",
	    fontSize: 25,
	    color: "#7cb5ec"
	  },
	  extra: {
	    ring: {
	      ringWidth: 60,
	      activeOpacity: 0.5,
	      activeRadius: 10,
	      offsetAngle: 0,
	      labelWidth: 15,
	      border: true,
	      borderWidth: 3,
	      borderColor: "#FFFFFF"
	    }
	  }
	});
	

	
	
	// 修正订单分布数据格式
	// const chartData1 = ref({
	// 	categories: ["维修","保养","洗车"],
	// 	series: [
	// 	  {
	// 	    name: "维修",
	// 	    data: [300]
	// 	  },
	// 		{
	// 		  name: "保养",
	// 		  data: [170]
	// 		},
	// 		{
	// 		  name: "洗车",
	// 		  data: [346]
	// 		}
	// 	]
	// });
	const chartData1 = ref({
		categories: ["维修","保养","洗车"],
		series: [
		  {
		    name: "完成量",
		    data: [300,170,346]
		  }
		]
	});
	const opts1 = ref({
	  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	  padding: [15,15,0,5],
	  enableScroll: false,
	  legend: {},
	  xAxis: {
	    disableGrid: true
	  },
	  yAxis: {
	    data: [
	      {
	        min: 0
	      }
	    ]
	  },
	  extra: {
	    column: {
	      type: "group",
	      width: 30,
	      activeBgColor: "#000000",
	      activeBgOpacity: 0.08
	    }
	  }
	});
	

</script>


<style>
	.hea {
		background-color: #f5f5f5;
	}

	.container {
		background-image: url(@/static/lbgt.png);
		height: 30vh;
		padding: 20rpx;
	}

	.filter {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
	}

	.tabs {
		margin-left: 50rpx;
		margin-top: 20rpx;
	}

	.tab {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 20rpx;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 4rpx solid #007aff;
	}

	.data-cards {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.data-card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		width: 48%;
		text-align: center;
	}

	.data-im {
		background-color: #ff5b24;
		padding: 10rpx;
		width: 80rpx;
		border-radius: 20rpx;
		margin: 20rpx 0 20rpx 100rpx;
	}

	.data-im image {
		width: 50rpx;
		height: 50rpx;
	}

	.data-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.data-label {
		font-size: 24rpx;
		color: #666;
	}

	.chart-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.distribution-list {
		margin-bottom: 20rpx;
	}

	.distribution-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.name {
		font-size: 26rpx;
		color: #333;
	}

	.amount {
		font-size: 26rpx;
		color: #ff6b00;
		margin-right: 15rpx;
	}

	.percentage {
		font-size: 24rpx;
		color: #999;
	}

	.pie-chart-placeholder {
		height: 200rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}

	.order-types {
		display: flex;
		margin-bottom: 20rpx;
	}

	.order-type {
		font-size: 26rpx;
		color: #666;
		margin-right: 30rpx;
		padding: 10rpx 15rpx;
		background-color: #f0f0f0;
		border-radius: 20rpx;
	}

	.order-stats {
		margin-top: 20rpx;
	}

	.stat-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.stat-type {
		font-size: 26rpx;
		color: #333;
	}

	.stat-count {
		font-size: 26rpx;
		color: #007aff;
	}

	.charts-box {
		width: 100%;
		height: 300rpx;
	}
</style>